<template>
  <el-upload
    class="avatar-uploader"
    action="#"
    :http-request="httpRequest"
    :before-upload="beforeUpload"
    ref="upload"
    :show-file-list="false"
  >
    <img
      v-if="picUrl"
      :src="picUrl"
      class="avatar"
    />
    <div
      v-else
      class="flexBox"
    >
      <i class="el-icon-plus avatar-uploader-icon"></i>
      <div style="color: #333333;font-size:12px">{{tip}}</div>
    </div>
  </el-upload>
</template>

<script>
  export default {
    name: 'mupload',
    data () {
      return {
        picUrl: ''
      }
    },
    props: {
      value: {
        type: String,
        default: null
      },
      limmit: {
        type: Number,
        default: 5
      },
      tip: {
        type: String,
        default: '请上传营业执照照片'
      }
    },
    watch: {
      selectValue: function (val) {
        this.validateSelectValue()
      }
    },
    methods: {
      validateSelectValue () {
        try {
          this.$emit('input', this.picUrl)
          this.$emit('change', this.picUrl)
        } catch (e) {
          this.$emit('error', true)
        }
      },
      async httpRequest (fileData) {
        let formData = new FormData()
        let file = fileData.file
        let fileName = file.name
        formData.append('fileName', new Blob([fileName], { type: 'application/json' }))
        formData.append('file', file)
        try {
          // const res = await this.$api.upLoadComputePlugin(formData)
          // if (res.code === 1) {
          //   this.$message.success('上传成功')
          //   this.picUrl = res.data.url
          // } else {
          //   this.$refs.upload.clearFiles()
          //   this.$message.error(res.msg)
          // }
        } catch (err) {
          this.$message.warning('服务器错误，请联系管理员')
        }
      },
      beforeUpload (file) {
        const isLt = file.size / 1024 / 1024 < this.limmit
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过${this.limmit}MiB!`)
          return false
        }
        const isImg = file.type === 'image/png'
        const isImg2 = file.type === 'image/jpeg'
        if (!(isImg || isImg2)) {
          this.$message.error('上传后缀名必须为jpg、png、jpeg!')
          return false
        }
        return true
      },
      handleUploadError () {
        this.$message({
          type: 'error',
          message: '上传失败',
        })
      }
    },
    created () {
      this.picUrl = this.value
    }
  }
</script>
<style scoped lang='scss'>
.flexBox {
  .el-icon-plus {
    margin-top: 30px;
  }
}
/deep/.el-upload__input {
  display: none !important;
}
.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 180px;
  background-color: #fafafa;
  height: 120px;
}
.avatar-uploader ::v-deep .el-upload:hover {
  border-color: #333;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #333;
}
.avatar {
  width: 180px;
  height: 120px;
  display: block;
}
</style>
